<template>
  <!-- 客户分配确认页面 -->
  <div class="distribution-confirm-container">
    <div class="distribution-title">
      <h1>客户分配</h1>
    </div>
    <div class="choiced-customer">
      <span>
        已选客户
      </span>
    </div>

    <div class="table-list">
      <vx-table :table-data="tableData" :columns="columns"></vx-table>
      <div class="page">
        <ui-pagination
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          :layout="layout"
          :page-sizes="pageSizeList"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </ui-pagination>
      </div>
    </div>
    <div class="distribution-info">
      <span>
        分配信息
      </span>
    </div>
    <div class="info-table">
      <vx-table :table-data="managertableData" :columns="managercolumns"></vx-table>
    </div>
    <div style="text-align: center;">
      <ui-button @click="returnPrePage">返回</ui-button>
      <ui-button type="primary" @click="confirmPage">确认</ui-button>
    </div>
  </div>
</template>
<script>
import vxTable from '@/components/vx-table';
export default {
  name:'distribution-confirm',
  components: {
    vxTable,
  },
  data() {
    return {
      layout: 'total, sizes, prev, pager, next, jumper', // 分页顺序
      columns: [
        {
          prop: 'userName',
          label: '客户号',
          fixed: true,
          width: '120',
        },
        {
          prop: 'updatedBy',
          label: '客户名称',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '客户类型',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '联系电话',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '证件类型',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '证件号码',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '所属机构',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '金融资产',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '客户等级',
          fixed: true,
        },
      ], //表头
      tableData: [],
      managercolumns: [
        {
          prop: 'userName',
          label: '客户经理名称',
          fixed: true,
          width: '120',
        },
        {
          prop: 'updatedBy',
          label: '客户经理所属机构',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '客户经理编号',
          fixed: true,
        },
        {
          prop: 'updatedBy',
          label: '管理类型',
          fixed: true,
        },
      ], //表头
      managertableData: [],
      managerbuttomGroup: [],
    };
  },
  methods: {
    // 返回
    returnPrePage() {
      this.$router.push({ path: '/customerdivision/distribution/distributionenter' });
    },
    // 确认-跳转到客户分配结果页
    confirmPage() {
      this.$router.push('/customerdivision/distribution/distributionresult');
    },
  },
};
</script>
<style lang="scss" scoped>
.distribution-confirm-container {
  .distribution-title {
    h1 {
      font-size: 20px;
    }
  }
  .choiced-customer,
  .distribution-info {
    span {
      height: 50px;
      line-height: 50px;
      font-weight: 600;
      font-size: 20px;
    }
  }
}
</style>
